<template>
  
  <el-menu
  :default-active="activeIndex"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
>
  <img src="//consumer-res.huawei.com/etc/designs/huawei-cbg-site/clientlib-campaign-v4/common-v4/images/logo.svg" 
  alt="" 
  class="a"
  @click="zhu"
  >
  <el-menu-item index="1" @click="mobile">手机</el-menu-item>
  <el-menu-item index="2">电脑</el-menu-item>
  <el-menu-item index="3">平板</el-menu-item>
  <el-menu-item index="4">智慧屏</el-menu-item>
  <el-menu-item index="5">穿戴</el-menu-item>
  <el-menu-item index="6">耳机音箱</el-menu-item>
  <el-menu-item index="7">全屋智能</el-menu-item>
  <el-menu-item index="8">更多产品</el-menu-item>
  <el-menu-item index="9">HarmonyOS 2</el-menu-item>

      <el-menu-item index="10" class="y">服务支持</el-menu-item>
    <el-menu-item index="11" >零售店</el-menu-item>
    <el-menu-item index="9" >商用</el-menu-item>
     <div class="size-icon">
 <search style="width: 1em; height: 1em; margin-right: 8px;"/>
 
<el-dropdown >
    <span class="size-2">
        <user style="width: 1em; height: 1em; margin-right: 8px;"/>

      <el-icon class="el-icon--user">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
          <h2 v-if="token">登录</h2>
        <h2 v-else>未登录</h2>
        <el-dropdown-item @click="login">登录</el-dropdown-item>
        <el-dropdown-item @click="register">注册</el-dropdown-item>
         <el-dropdown-item @click="loginout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

    </div>
    <el-row>
  <el-button round class="button-size">华为商城</el-button>
   </el-row>

</el-menu>

 <div class="heading">
 <el-row class="top-heading">
    
     <el-col :span="24">
     <h2 class="sc"
     >华为应用市场</h2>
    <el-button 
    type="danger" 
    round 
    class="xz"
    @click="xzcg"
   >点击下载</el-button>
   </el-col>
   
 </el-row>
</div>


 <el-row>
     <el-col :span="12">
          <section class="index_common1 bg_safe">
         <div class="top_center">
             <div class="common_left">
                 <div class="common_logo">
                     <img src="https://consumer-img.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/campaign/mobileservices/img-new/app_store_logo_v3.png" class="tp">
                     </div >
                     <div class="ww">
                     <h2 class="common_h1">放心玩 畅快玩</h2></div>
                     <div class="common_part1">
                     <p class="common_h2">华为应用市场是华为终端官方应用分发平台。四重检测机制保障应用安全；智能“伏羲算法”
                         精准推荐内容；拥有国内安卓独家无广告全功能1000+付费精品应用，提供安卓应用分级体
                         验，根据孩子年龄智能排除非适龄内容，开启绿色使用环境，让用户放心下，畅快玩。
                     </p>
                      <el-button round class="aniu">了解详情</el-button>
                     </div>
             </div>
         </div>
           </section>
          </el-col>
          <el-col :span="12">
         <div class="common_right">
             <img src="https://consumer-img.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/huawei-cloud-service/appgallery/img/top_banner.jpg" class="tp2">
         </div>
         </el-col>
 </el-row>

 <el-row>
     <el-col :span="24">
         <section class="index_common bg_safe">
             <h2>安全 大胆放心下</h2>
             <img src="https://consumer-img.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/huawei-cloud-service/appgallery/img/safe_pc-v1.png"
             class="img1"
             >
             <ul class="part">
                 <div class="par2">
                 <el-col :span="8">
                 <li>
                     <h3>开发者实名验证</h3>
                     <p>
                         “用户下载更放心”
                         <br>
                         “平台合作更紧密”
                     </p>
                 </li>
                 </el-col>

                   <el-col :span="8">
                 <li>
                     <h3>独家四重检测</h3>
                     <p>
                         “恶意行为检测；安全漏洞扫描”
                         <br>
                         “隐私泄露检查；人工实名复检”
                     </p>
                 </li>
                  </el-col>

                  <el-col :span="8">
                 <li>
                     <h3>后期全面监控</h3>
                     <p>“月度盘点回测；全民监督反馈”</p>
                     <br>
                     “政企多方联动”
                 </li>
                 </el-col>
                 </div>
             </ul>
         </section>
     </el-col>
 </el-row>


</template>

<script >
import {Search,User} from '@element-plus/icons-vue';
//图标名称要大写，要使用驼峰命名法
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        token:"",
      }
    },
    methods: {
      loginout(){
                this.token="";
                localStorage.token="";
            },
      handleSelect(key, keyPath) {
        console.log(key, keyPath)
      },
      mobile(){
             this.$router.push({name:'mobile'})
        },
        login(){
           this.$router.push({name:'login'})
            this.token="lijiyang";
                localStorage.token="lijiyang";
        },
        register(){
           this.$router.push({name:'register'})
        },
        zhu(){
           this.$router.push({name:'yemian'})
        },
        xzcg(){
                 this.$message('下载成功 ' )
        }
    },
     mounted() {
            this.token=localStorage.token;
        },
     components:{
     Search,
     User,
      //注册图标组件名称
  },
  }
</script>
<style lang="scss" scoped>

.a{
   width:120px;
    height: 20px;
    padding-top: 18px;
   

}
.el-menu-item{
    color: #000;
}
.y{
    margin-left: 140px;
}
.size-icon{
font-size: 20px;
padding-top: 15px;
margin-left: 15px;
height: 30px;
}
.el-row{
    margin-left: 15px;
    padding-top: 15px;
}
.size-2{
font-size: 20px;
padding-top: 15px;
margin-left: 9px;
height: 30px;
}

.heading{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 24px 0;
    position: relative;
    justify-content: space-between;
        box-sizing: border-box;
            outline: 0;
                margin: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline; 
    .top-heading{
    background: rgb(255, 255, 255);
    height: 130px;
     margin-top: 5px;
    .sc{
    font-size: 18px;
    }
    .xz{
   background: #CE0E2D;
   margin-left: 1300px;
   margin-top: -50px;
       }
       }
   
    * {
    -webkit-tap-highlight-color: transparent;
    }
    .part2{
        text-align: center;
    }

}
.index_common{
    padding-top: 80px;
    text-align: center;
    height: 643px;
}
.index_common1{
    padding-top: 80px;
    height: 643px;
}
.bg_safe {
    background: #F3F7FB;
}
.img1{
    margin-left: 300px;
    padding-top: 50px;
}
.tp{
        margin-left: 90px;
    }
 .top_center {
    max-width: 1165px;
    width: 100%;
    overflow: hidden;
    padding-top: 70px;
    padding-bottom: 5.2vw;
    background: #F2F5FA;
    outline: none;
    }
    .common_part1{
        margin-left: 90px;
        margin-right: 190px;
        font-size: 20px;
    }
    .common_h1{
     
     font-size: 50px;
    }
    .ww{
        margin-left: 90px;
    }
    .aniu{
        color: #fff;
        background: #000;
    }
    .par2{
        margin-left: 400px;
        padding-top: 40px;
    }
    




</style>